<!DOCTYPE html>
<html>
<head>
    <title>Simple Input Page</title>
    <style>
    </style>
    <script>
        "use strict";

        function doPostMessage(message) {
            // Do different things in WebView2 vs the browser, so neither gets an error
            try {
                window.chrome.webview.postMessage(message);
            }
            catch {
                window.postMessage(message);
            }
        };

        function sendInputMessage() {
            doPostMessage("Input button clicked.");
        };

        function onGotFocus(x) {
            if (document.hasFocus()) {
                var output = (x.id) ? x.id : x;
                doPostMessage("Focus on: " + output);
                console.log("Focus on: " + output);
            }
            else {
                doPostMessage("Focus on: n/a");
            }
        };

        function onFocusOut() {
            if (!document.hasFocus()) {
                doPostMessage("Focus on: document lost focus");
                console.log("Focus on: document lost focus");
            }
        };

        function onGotBlur(x)
        {
            var output = (x.id) ? x.id : x;
            doPostMessage("Blur on: " + output);
            console.log("Blur on: " + output);
        };

        function getSelectedOption() {
            var s1 = document.getElementById("s1");
            var val = s1.value;
            console.log("Value: " + val);
            return val;
        };
    </script>
</head>

<body id="body" onfocus="onGotFocus(this)" onblur="onGotBlur(this)" onfocusout="onFocusOut()">
    <form>
        TextBox: <input style="font-size:50px" type="text" id="w1" onblur="onGotBlur(this)" onfocus="onGotFocus(this)"><br>
    </form>

    <button onclick="sendInputMessage()" id="b1" onblur="onGotBlur(this)" onfocus="onGotFocus(this)"> Input button </button>

    <center>
        <select name="select" id="s1" style="font-size:70px" onfocus="onGotFocus(this)">
            <option value="1">Lorem</option>
            <option value="2">Ipsum</option>
            <option value="3">Dolor</option>
        </select>
    </center>
</body>
</html>
